<%@page import="java.util.Date"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<%@page import="edu.hcmus.sow.utils.StringUtil"%>
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />

<html>
<body>
<link href="${pageContext.request.contextPath}/css/ApprovalPanel.css" rel="stylesheet" />

<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.ui.1.8.6.ui.core.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.ui.1.8.6.ui.widget.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ui.dropdownchecklist-1.1-min.js?v2"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui.dropdownchecklist.themeroller.css" /> --%>

<link href="${pageContext.request.contextPath}/css/uploadPanel.css" rel="stylesheet">
<script type="text/javascript">
   Wicket.Event.add(window, "domready", function(event) {
      $('#addLink248').click(function() {
         $('input[name=fileInput]').val('');
         $('#hiddenArea249').slideDown(250);
         $('#addLink248').hide();
         $('#addLinkAlt24a').show();
      });
      $('#cancel24b,#downarrow24c').click(function() {
         $('#hiddenArea249').slideUp(250);
         $('#addLink248').show();
         $('#addLinkAlt24a').hide();
      });
   });
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
   Wicket.Event.add(window,"domready",function(event) {
      $('#txaEditableContent').tinymce({
            script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
            theme : "advanced",
            auto_resize : "true",
            relative_urls : false,
            verify_html : false,
            width : "100%",
            plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resizing : false
      });
   });
</script>
<script type="text/javascript">
	Wicket.Event.add(window,"domready",function(event) {
		$('#approveComment').tinymce({
            script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
            theme : "advanced",
            auto_resize : "true",
            relative_urls : false,
            verify_html : false,
            width : "100%",
            plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resizing : false
         });
	});
</script>

<script type="text/javascript">
   function addComment(id){
      var content = $('#txaEditableContent').val().trim();
      var temp = content.replace('<p>','');
      temp = temp.replace('</p>','');
      temp = temp.replace(/(&nbsp;)*/g,'');
      if(temp == ''){
         alert('Content must not blank!');
      } else {
         $.ajax({
            url : '${pageContext.request.contextPath}/ajax/file/' + id +'/addComment',
            type : "POST",
            data: { content: content },
            dataType : "html",
            beforeSend : function() {
               $('#showAreaAddComment').show();
            },
            complete : function() {
               $('#showAreaAddComment').hide();
            },
            success : function(data) {
               $('#txaEditableContent').val('');
               $('#commentContainer').html(data);
            },
            error : function() {
               alert("Failure args: " + arguments);
            }
         });
         return false;
      }
   }
</script>

<script type="text/javascript">
	function showRenameFile(){
		$('input[name=input_file_name]').val($('#label_file_name').text());
		$('#label_file_name').hide();
		$('input[name=input_file_name]').slideDown(500);
		$('input[name=input_file_name]').focus();
	}
	function hideRenameFile(){
	   	$('#span_error').text('');
        $('input[name=input_file_name]').fadeOut(500);
        $('#label_file_name').show(1000);
	}
	function renameFile(id){
		var prefix = $('input[name=input_file_name]').val().trim();
		var suffix = $('#suffixFileName').text().trim();
		var fileName = prefix + suffix;

		$.ajax({
			url : '${pageContext.request.contextPath}/ajax/file/' + id +'/rename',
            type : "POST",
            data: { fileName: fileName },
            dataType : "html",
            success : function(data) {
               if (data == "") {
                  $('#label_file_name').text(prefix);
                  hideRenameFile();
               } else {
                  $('#span_error').text(data);
                  $('#span_error').show();
               }
            },
            error : function() {
               alert("Failure args: " + arguments);
            }
		});
		return false;
	}
</script>
<script type="text/javascript">
   function uploadNewVersion(id){
      $('#spinnershareDialog').show();
      $('#formUpload').submit();
   }
</script>

<script type="text/javascript">
	Wicket.Event.add(window, "domready", function(event) {
		$('#close,#cancelApproveDialog').click(function(){
			$('#dialogContainer').hide(500);
		});
	});
</script>

<script type="text/javascript">
   Wicket.Event.add(window, "domready", function(event) {
      $('#editPermissionsLink').click(function(){
         $('#permissionsDialog').load('${pageContext.request.contextPath}/ajax/document/${file.file.id}/permissions');
      });
      
      $('#cancelPermissionLink').click(function(){
         $('#permissionsDialogContainer').hide(500);
      });
   });
</script>

<script type="text/javascript">
   function addPermission(){
      var newUserIDs = $('#permissionMember').val();
      var newPerm = $('input[name="newPermGroup"]:checked').val();
      var pIDs = [];
      var perms = [];
      $('input[name="pid"]').each(function(){
         var pID = $(this).val();
         pIDs.push(pID);
         perms.push($('input[name="permGroup' + pID +'"]:checked').val());
      });

      $.ajax({
         url : '${pageContext.request.contextPath}/ajax/document/' + '${file.file.id}' +'/permission/add',
         type : "POST",
         data : { newUserIDs: newUserIDs, newPerm: newPerm, pIDs: pIDs, perms: perms },
         dataType : "html",
         beforeSend : function() {
            $('#spinnerPermission').show();
         },
         complete : function() {
            $('#spinnerPermission').hide();
         },
         success : function(data) {
            $('#permissionsDialog').html(data);
         },
         error : function() {
            alert("Failure args: " + arguments);
         }
      });
      return false;
   }
   
   function deletePermission(id){
      if(confirm('Are you sure you want to delete this access right?')){
         $.ajax({
            url : '${pageContext.request.contextPath}/ajax/document/' + '${file.file.id}' +'/permission/' + id + '/delete',
            type : "POST",
            data : { },
            dataType : "html",
            beforeSend : function() {
               //$('#spinnerPermission').show();
            },
            complete : function() {
               //$('#spinnerPermission').hide();
            },
            success : function(data) {
               $('#permissionsDialog').html(data);
            },
            error : function() {
               alert("Failure args: " + arguments);
            }
         });
         return false;
      }
   }
</script>

<link href="${pageContext.request.contextPath}/css/DocumentDetailPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/CommentPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/DialogPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/ApprovalDialog.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/PermissionsPanel.css" rel="stylesheet" type="text/css" />
<!-- token input -->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tokeninput/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/tokeninput/token-input.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/tokeninput/token-input-facebook.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/tokeninput/custom-token-input.css" type="text/css" />
<!-- end token input -->

   <div class="cubeTitleWrapper">
      <span class="cube_title">ABC</span> <span class="wklinks"> <span class="settings"><a
            href="#">Settings</a></span>
      </span>
   </div>

   <div class="cube">
      <div>
         <div class="contentwrapper">
            <div class="contentcolumn">
               <div class="innertube">
                  <span id="feedback25a"></span>
                  <h2 class="userDefinedBg">
                     <span class="right_end"><span class="start">Document</span></span>
                  </h2>
                  <div class="contentBlock">
                     <ul class="list documentDetails">
                        <li>
                           <div class="folders">
                              <strong>Current Folder:</strong> <span><span>» <a href="#"><span>ABC</span></a>
                              </span></span>»
                           </div>
                           <c:set var="filename" value="${file.file.name}" />
                           <span class="title">
                              <span class="fileTitle" id="title">
                                 <span id="label_file_name" onclick="showRenameFile();"><%=StringUtil.getPrefix((String)pageContext.getAttribute("filename")) %></span><input style="display: none" value="" name="input_file_name" id="input_file_name" onblur="renameFile(${file.file.id});" onkeypress="" onkeydown="" type="text"></span><span id="span_error" style="color:red"></span><span id="suffixFileName" class="filename"><%=StringUtil.getSuffix((String)pageContext.getAttribute("filename")) %></span> 
                           </span>
                           <br class="clear">
                           <div>
                              
                           </div>
                        </li>
                        <li class="labelList">
                           <div style="float: left;">
                              Version: 
                              <span class="currentVersion">${file.revision}</span>
                              -
                              <c:choose>
                                 <c:when test="${file.id == fileRevisions.get(0).id}"><span class="latestVersion">Latest Version</span>&nbsp;&nbsp;</c:when>
                                 <c:otherwise><span class="oldVersion">Old Version</span>&nbsp;&nbsp;</c:otherwise>
                              </c:choose>
                              <span style="color: #bbbbbb;">|</span>&nbsp;&nbsp;
                              Permissions: 
                              <span style="color: grey">None set</span>
                              -
                              <a id="editPermissionsLink" href="javascript:;" onclick="">Edit</a>
                           </div>
                           <div class="labels" id="labelContainer261">
                              <span class="label"></span>&nbsp;
                           </div>
                        </li>
                     </ul>
                     <div class="downDetails">
                        <img class="fileType" src="${pageContext.request.contextPath}/images/unknown.png" alt="">
                        <div class="download">
                           <c:set var="filesize" value="${file.size}" />
                           <a href="${pageContext.request.contextPath}/file/${file.id}/download?rk=${file.rowkey}">
                              Download Now <span class="filesize">(<%=StringUtil.bytesToString((Long)pageContext.getAttribute("filesize")) %>)</span>
                           </a> <span class="preview">No preview available</span> <br class="clear">
                        </div>
                        <br class="clear">
                     </div>
                     <div class="spacer"></div>
                  </div>
                  <div class="contentBlock_bottom">
                     <span class="right_end"><span></span></span>
                  </div>
                  <h2 class="userDefinedBg">
                     <span class="right_end"><span class="start">Comments</span></span>
                  </h2>
                  <div class="contentBlock">
                     <br>
                     <div>
                        <div class="CommentPanel" id="commentContainer-old">
                        <!-- comments -->
                           <div id="commentContainer">
                              <%@include file="controls/c_file_comment.jsp" %>
                           </div>
                        <!-- end comments -->
                           <div class="CommentPanel" id="commentPanel">
                              <span class="boldBlack">Please make a comment</span> <span id="feedback263"></span>
                              <form id="commentForm" method="post" action="">
                                 <div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
                                    <input name="commentForm_hf_0" id="commentForm_hf_0" type="hidden">
                                 </div>
                                 <div class="spacer">&nbsp;</div>
                                 <div class="icon_left">
                                    <span><a class="profileThumb" href="#">
                                          <span class="thumbmask"><span class="topleft"></span><span
                                             class="topright"></span><span class="bottomleft"></span><span
                                             class="bottomright"></span> <img id="profileImg264"
                                             src="${pageContext.request.contextPath}/images/default_profile.png" />
                                       </span>
                                    </a></span>
                                 </div>
                                 <div class="form_wrapper">
                                    <div class="inner_form_wrapper">
                                       <textarea style="" id="txaEditableContent" class="commentArea" name="comment"></textarea>
                                    </div>
                                 </div>
                                 <div class="spacer">&nbsp;</div>
                                 <div class="addArea">
                                    <a id="commentSubmit268" style="display: none;"></a>
                                    <a class="gcSubmit" id="commentSubmitAjax" href="javascript:;" onclick="addComment(${file.id});">
                                       Save <span class="left"></span><span class="right"></span>
                                    </a>
                                    <span style="display: none" id="showAreaAddComment"> <img src="${pageContext.request.contextPath}/images/throbber.gif" /> </span>
                                    <input id="parentComment" value="" name="parentComment" type="hidden"> 
                                 </div>
                                 <div class="spacer">&nbsp;</div>
                              </form>
                           </div>
                        </div>
                        <div id="editCommentDialog26b"></div>
                     </div>
                     <div class="spacer"></div>
                  </div>
                  <div class="contentBlock_bottom">
                     <span class="right_end"><span></span></span>
                  </div>
               </div>
            </div>
         </div>
         <div class="rightcolumn">
            <div class="innertube">
               <div>
                  <h2 class="userDefinedBg curveTop">
                     <span class="right_end"><span class="start">Toolbox</span></span>
                  </h2>
               </div>
               <div class="contentBlock">
               <c:choose>
                  <c:when test="${file.id == fileRevisions.get(0).id}">
                  <ul class="toolbox userDefinedColor">
                     <!-- <li class="userDefinedBg">
                        <a class="add_link edit" onclick="return popup(this,'examplea')" href="#">
                           Edit online </a></li> -->
                     <!-- <li class="userDefinedBg"><a class="add_link lock" href="#">
                           Lock for edit </a></li> -->
                     <li class="delete"><a class="add_link delete" href="#"
                        onclick="return confirm('Are you sure you want to remove the document and all the versions?');">
                           Delete this document </a></li>
                     <!-- <li class="userDefinedBg"><a class="add_link share" id="shares26c" href="#"
                        onclick="">
                           Share this file <span style="display: none;" id="spinnershareDialog26d"> <img src="/spinnerflat.gif"></span>
                     </a></li> -->
                  </ul>
                  </c:when>
                  <c:otherwise>
                  <ul class="toolbox userDefinedColor">
                     <li class="userDefinedBg">
                        <a class="add_link" href="${pageContext.request.contextPath}/document/${fileRevisions.get(0).id}">Show latest version</a>
                     </li>
                  </ul>
                  <p style="text-align: center; margin: 15px 0 0 0; font-weight: bold; color: red;">
                     Showing read only version&nbsp;<span>${file.revision}</span>
                  </p>
                  </c:otherwise>
               </c:choose>
                  <div class="spacer">&nbsp;</div>
                  <div id="listSharings26e"></div>
               </div>
               <div class="contentBlock_bottom">
                  <span class="right_end"><span></span></span>
               </div>
               <div id="refreshApproval26f">
                  <div>
                     <div>
                        <h2 class="userDefinedBg">
                           <span class="right_end"><span class="start">Approvals</span></span>
                        </h2>
                     </div>
                     <div class="contentBlock">
                     <!-- control approval -->
                        <div id="refreshArea">
                           <%@include file="controls/c_approval_form.jsp" %>
                        </div>
                     <!-- end control approval -->
                        <div class="spacer"></div>
                     </div>
                     <div class="contentBlock_bottom">
                        <span class="right_end"><span></span></span>
                     </div>
                  </div>
               </div>
               <div>
                  <h2 class="userDefinedBg">
                     <span class="right_end"><span class="start">Versioning</span></span>
                  </h2>
               </div>
               <div class="contentBlock">
                  <div id="resendApproval274"></div>
                  <ul class="toolbox userDefinedColor">
                     <li class="expandable userDefinedBg">
                        <div class="upload">
                           <div style="display: block; height: 36px;" id="addLink248">
                              <a href="javascript:;" class="add_link" style="position: relative;"><span
                                 class="add_title"> Upload new version</span><img class="arrow"
                                 src="${pageContext.request.contextPath}/images/arrow_green_right.png"></a>
                           </div>
                           <div class="panel_open" style="position: relative; display: none;" id="addLinkAlt24a">
                              <span class="add_title">Upload new version</span> <span class="arrow" id="downarrow24c">
                                 <img src="${pageContext.request.contextPath}/images/arrow_green_bottom.png">
                              </span>
                           </div>
                           <div style="display: none;" id="hiddenArea249">
                              <div class="innerArea upload">
                                 <form class="documentUpload" id="formUpload" method="post" action="${pageContext.request.contextPath}/ajax/file/upload?currentRevisionID=${fileRevisions.get(0).id}" enctype="multipart/form-data">
                                    <div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
                                       <input name="currentRevisionID" id="currentRevisionID" value="${fileRevisions.get(0).id}" type="hidden">
                                    </div>
                                    <div class="panel_content">
                                       <ul>
                                          <li class="title"></li>
                                          <li><label for="upload"> File</label> <input size="17" id="upload"
                                             name="fileInput" type="file"></li>
                                          <li class="uploadLabel"></li>
                                          <!-- <li>Notify by email<br> <span> <select size="50"
                                                style="width: 50px; display: none; visiblity: visible;"
                                                multiple="multiple" name="notifyWho" id="notifyWho238">
                                                   <option value="0">All Members</option>
                                                   <option value="1">Me</option>
                                             </select>
                                          </span></li> -->
                                          <li><span style="display: none; color: #489DD4;" id="spinnershareDialog"><img src="${pageContext.request.contextPath}/images/throbber.gif" /></span></li>
                                          <li class="progress">
                                             <div class="wupb-container">
                                                <div class="wupb-progressBar" style="display: none;" id="bar24f">
                                                   <div class="wupb-border">
                                                      <div class="wupb-background">
                                                         <div class="wupb-foreground"></div>
                                                      </div>
                                                   </div>
                                                </div>
                                                <div class="wupb-uploadStatus" style="display: none;" id="status24e">
                                                </div>
                                             </div>
                                          </li>
                                       </ul>
                                    </div>
                                    <div class="panel_btn">
                                       <div class="cancel">
                                          <a href="javascript:;" class="action userDefinedColor" id="cancel24b">Cancel</a>
                                       </div>
                                       <a class="gcSubmit small" href="#" onclick="uploadNewVersion(${fileRevisions.get(0).id});">
                                          Upload <span class="left"></span><span class="right"></span>
                                       </a> <br class="clear">
                                    </div>
                                 </form>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
                  <ul class="pictoList">
                     <!-- VERSIONS LIST -->
                     <c:forEach items="${fileRevisions}" var="fr">
                     <li class="${fr.id == file.id ? 'selectedVersion' : 'unselectedVersion'}">
                        <span><a class="profileThumb" href="#">
                           <span class="thumbmask">
                              <span class="topleft"></span>
                              <span class="topright"></span>
                              <span class="bottomleft"></span>
                              <span class="bottomright"></span>
                              <img id="profileImg" src="${pageContext.request.contextPath}/images/default_profile.png">
                           </span>
                        </a></span>
                        <c:set var="createdDate" value="${fr.createdDate.getTime()}"></c:set>
                        <div class="versionDetails">
                           <c:choose>
                              <c:when test="${fr.id == file.id}"><span><em><span>View</span> Version</em></span></c:when>
                              <c:otherwise><a href="${pageContext.request.contextPath}/document/${fr.id}"><span>View</span> Version</a></c:otherwise>
                           </c:choose>
                           <span style="font-weight: bold;">${fr.revision}</span>
                           <!-- <a href="#" style="float: right; font-size: 10px;"
                              onclick="return confirm('Are you sure you want to remove this version?');"> delete</a> -->
                           <span class="info">updated
                              <span><%=new PrettyTime().format((Date) pageContext.getAttribute("createdDate"))%></span> by
                              <span>${fr.userByCreatedBy.username}</span>
                           </span>
                        </div>
                        <div class="spacer">&nbsp;</div>
                     </li>
                     </c:forEach>
                     <!-- END VERSIONS LIST -->
                  </ul>
                  <div class="spacer"></div>
               </div>
               <div class="contentBlock_bottom">
                  <span class="right_end"><span></span></span>
               </div>
            </div>
         </div>
         <div class="moveDialog" id="permissionsDialog">

         </div>
         <div class="approvalD" id="approveDialog">
            <div style="display: none;" id="dialogContainer">
               <div id="gcdialog">
                  <div class="gcdtitle">
                     <span class="title">Approvals</span>
                     <a href="javascript:;" id="close"></a>
                  </div>
                  <div class="contentwrapper">
                     <div class="content">
                     <span>
                        <div id="titleDialog" class="iapprove">
                           <div class="approved">You approve this file.</div>
                        </div>
                        <div class="comments">
                        You can write a reason if you wish
                        <form class="approveForm" id="approveForm" method="post" action="">
                        <div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden">
                           <input name="approveForm_hf_0" id="approveForm_hf_0" type="hidden">
                        </div>
                           <textarea name="approveComment" id="approveComment"></textarea>
                           <div style="line-height:34px">
                           <a class="gcSubmit" id="submitLink" href="javascript:;">
                              <span>Approve</span>
                              <span class="left"></span>
                              <span class="right"></span>
                           </a>
                           or <a id="cancelApproveDialog" href="javascript:;">cancel</a>
                           </div>
                        </form>
                        </div>
                     </span>
                     </div>
                  </div>
                  <div class="background userDefinedBg">
                  </div>
               </div>
            </div>
         </div>
         <div class="moveDialog" id="shareDialog278"></div>
      </div>
   </div>
</body>
</html>